<template>
<div id='home'>
  <nav-bar class='home-nav'>
    <template v-slot:center><div>购物街</div></template>
  </nav-bar>
  <home-swiper :banners="banners"></home-swiper>
  <recommend-view :recommends="recommends"></recommend-view>
  <feature-view></feature-view>
  <tab-control class="tab-control" :titles="['流行','新款','精选']"></tab-control>
  <goods-list :goods="goods['pop'].list"></goods-list>
  <ul>
    <li>列表</li>
    <li>列表</li>
    <li>列表</li>
    <li>列表</li>
    <li>列表</li>
    <li>列表</li>
    <li>列表</li>
    <li>列表</li>
    <li>列表</li>
    <li>列表</li>
    <li>列表</li>
    <li>列表</li>
    <li>列表</li>
    <li>列表</li>
    <li>列表</li>
    <li>列表</li>
    <li>列表</li>
    <li>列表</li>
    <li>列表</li>
    <li>列表</li>
    <li>列表</li>
    <li>列表</li>
    <li>列表</li>
    <li>列表</li>
    <li>列表</li>
    <li>列表</li>
    <li>列表</li>
    <li>列表</li>
    <li>列表</li>
    <li>列表</li>
    <li>列表</li>
    <li>列表</li>
    <li>列表</li>
    <li>列表</li>
    <li>列表</li>
  </ul>
</div>
</template>

<script>
import axios from 'axios'

import HomeSwiper from "./childComps/HomeSwiper.vue"
import RecommendView from "./childComps/RecommendView.vue"
import FeatureView from "./childComps/FeatureView.vue"

import NavBar from '../../components/common/navbar/NavBar.vue'
import TabControl from "../../components/common/tabControl/TabControl.vue"
import GoodsList from "../../components/content/goods/GoodsList.vue"

import {getHomeMultidata,getHomeGoods} from "../../network/home.js"



export default {
name:'home',
components:{
NavBar,
HomeSwiper,
RecommendView,
FeatureView,
TabControl,
GoodsList,

},
data(){
  return {
    banners:[],
    recommends:[],
    goods:{
      'pop':{page:0,list:[]},
      'new':{page:0,list:[]},
      'sell':{page:0,list:[]},
    }
  }
},
created() {
 this.getHomeMultidata()

 this.getHomeGoods('pop')
 this.getHomeGoods('new')
 this.getHomeGoods('sell')
},
methods:{
  getHomeMultidata(){
 getHomeMultidata().then(res=>{
    this.banners=res.data.banner.list;
    this.recommends=res.data.recommend.list;
  })
  },
  getHomeGoods(type){
    const page=this.goods[type].page+1
 getHomeGoods(type,page).then(res=>{
    
    this.goods[type].list.push(...res.data.list)
    this.goods[type].page+=1
  })
  }
}
}
</script>

<style>
#home {
  padding-top:44px;
}
.home-nav {
  background-color: var(--color-tint);
  color:white;
  position:fixed;
  left:0;
  right:0;
  top:0;
  z-index:9;
}
.tab-control {
  position:sticky;
  top:44px;
}
</style>